---
import DOMPurify from "isomorphic-dompurify";
import { Marked } from "marked";
import { markedHighlight } from "marked-highlight";
import hljs from "highlight.js";
import markedAlert from "marked-alert";
import { gfmHeadingId } from "marked-gfm-heading-id";
import dom from "jsdom";

import Main from "../../layouts/main.astro";
import "../../markdown.css";

import { slugify } from "../../functions/slugify";
export async function getStaticPaths() {
    const entries = [];
    const { JSDOM } = dom;
    // Get all the remote plugins
    const fetchReg = await fetch("https://registry.anyquery.dev/v0/registry/", {
        headers: {
            "Content-Type": "application/json",
        },
    });
    const marked = new Marked(
        markedHighlight({
            langPrefix: "hljs language-",
            highlight: (code: string, lang: string) => {
                const language = hljs.getLanguage(lang) ? lang : "plaintext";
                return hljs.highlight(code, { language }).value;
            },
        })
    )
        .use(markedAlert())
        .use(gfmHeadingId({}));
    const remotePlugins: any = await fetchReg.json();
    for (const plugin of remotePlugins.plugins) {
        const sanitized = DOMPurify.sanitize(
            await marked.parse(plugin.page_content)
        );

        // Parse the images src using the sanitized html
        // If it starts with ./ or /, prefix it with the repo url
        //
        // This is a workaround for the images not being displayed on the website
        // because fetched from the repository README.md
        const parsed = new JSDOM(sanitized);
        let images = parsed.window.document.querySelectorAll("img, source");
        images.forEach((img) => {
            let isSrcSet = false;
            let src = img.getAttribute("src");
            if (!src) {
                src = img.getAttribute("srcset");
                if (!src) {
                    return;
                }
                isSrcSet = true;
            }

            if (src.startsWith("./") || src.startsWith("/")) {
                // Regex if the homepage follows the format https://github.com/user/repo/tree/branch/whatever
                // And extract the branch, user and repo
                // The tree, branch and whatever are optional !!!!!!!
                const regex =
                    /https:\/\/github.com\/([^/]+)\/([^/]+)(?:\/tree\/([^/]+))?(?:\/([^/]+))?/;
                const match = plugin.homepage.match(regex);
                if (match) {
                    const user = match[1];
                    const repo = match[2];
                    const branch = match[3] || "main";
                    const prefix =
                        match[4] ?? "" + src.replace(/^\/|^\.\//, ""); // Remove the leading / or ./
                    if (isSrcSet) {
                        img.setAttribute(
                            "srcset",
                            `https://raw.githubusercontent.com/${user}/${repo}/${branch}/${prefix}`
                        );
                    } else {
                        img.setAttribute(
                            "src",
                            `https://raw.githubusercontent.com/${user}/${repo}/${branch}/${prefix}`
                        );
                    }
                }
            }
        });

        // Do exactly the same for the URLs
        let links = parsed.window.document.querySelectorAll("a");
        links.forEach((link) => {
            let href = link.getAttribute("href");
            if (href && (href.startsWith("./") || href.startsWith("/"))) {
                // Regex if the homepage follows the format
                const regex =
                    /https:\/\/github.com\/([^/]+)\/([^/]+)(?:\/tree\/([^/]+))?(?:\/([^/]+))?/;
                const match = plugin.homepage.match(regex);
                if (match) {
                    const user = match[1];
                    const repo = match[2];
                    const branch = match[3] || "main";
                    const prefix =
                        match[4] ?? "" + href.replace(/^\/|^\.\//, ""); // Remove the leading / or ./

                    link.setAttribute(
                        "href",
                        `https://github.com/${user}/${repo}/blob/${branch}/${prefix}`
                    );
                }
            }
        });
        const compatiblePlatform: string[] = [];
        if (plugin.versions.length > 0) {
            for (const platform in plugin.versions[0].files) {
                compatiblePlatform.push(platform);
            }
        }

        const versions = plugin.versions.map((version: { version: string }) => {
            return version.version;
        });

        entries.push({
            params: { plugin: slugify(plugin.name) },
            props: {
                rawTitle: plugin.name,
                title: plugin.display_name,
                description: plugin.description,
                author: plugin.author,
                version: plugin.last_version,
                readme: parsed.serialize(),
                icon: plugin.icon,
                license: plugin.license,
                homepage: plugin.homepage,
                tables:
                    plugin.versions.length > 0 ? plugin.versions[0].tables : [],
                compatiblePlatform,
                versions,
                type: plugin.type,
            },
        });
    }

    return entries;
}

const {
    rawTitle,
    title,
    description,
    author,
    version,
    readme,
    icon,
    license,
    homepage,
    tables,
    compatiblePlatform,
    versions,
    type,
} = Astro.props;
---

<Main title={title + " - AnyQuery"} description={description}>
    <style is:global></style>
    <main
        class="flex flex-wrap-reverse flex-row gap-2 justify-center md:justify-between md:items-end"
    >
        <article
            class="md:max-w-[65%] md:mx-0 overflow-hidden"
            set:html={readme}
        />
        <aside
            class="flex flex-col mt-7 p-6 rounded-lg md:max-w-[30%] bg-white/10"
        >
            {
                icon && (
                    <img
                        src={icon}
                        alt={title}
                        class="h-14 w-14 aspect-square"
                    />
                )
            }
            <h1 class="mb-0 mt-4 p-0 text-2xl">{title}</h1>
            <p class="mt-0 mb-4">{description}</p>
            <p class="m-0 text-white/60">
                Made by <a href={`https://github.com/${author}`}>{author}</a> · Version{
                    " " + version
                }
            </p>
            <p class="m-0 text-white/60">License: {license}</p>
            <a href={homepage} class="mr-2 text-white/60 text-sm inline-flex">
                Homepage <svg
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg"
                    class="ml-2"
                >
                    <path
                        fill="none"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M15 3h6v6m-11 5L21 3m-3 10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
                    ></path>
                </svg></a
            >
            {
                type === "sharedObject" && (
                    <div class="mt-2">
                        <h2 class="text-lg text-white/90 mb-2">Installation</h2>
                        <div class="text-sm bg-white/10 p-3 break-words rounded-md">
                            <code>{`anyquery install ${rawTitle}`}</code>
                        </div>
                    </div>
                )
            }
            {
                type === "anyquery" && (
                    <div class="mt-2">
                        <h2 class="text-lg text-white/90 mt-0">Tables</h2>
                        <ul class="mt-0">
                            {tables.map((table: any) => (
                                <li>{`${rawTitle}_${table}`}</li>
                            ))}
                        </ul>
                    </div>
                )
            }
            <div class="mt-2 pt-0">
                <h2 class="text-lg text-white/90 mt-0">Compatible platforms</h2>
                <ul class="mt-0">
                    {
                        compatiblePlatform.map((platform: string) => (
                            <li>{platform}</li>
                        ))
                    }
                </ul>
            </div>
            <div class="mt-2 pt-0">
                <h2 class="text-lg text-white/90 mt-0">Versions</h2>
                <ul class="mt-0">
                    {versions.map((version: string) => <li>{version}</li>)}
                </ul>
            </div>
        </aside>
    </main>
</Main>
